<%--
  Created by IntelliJ IDEA.
  User: 小袁啊
  Date: 2024/10/29
  Time: 下午3:04
  To change this template use File | Settings | File Templates.
--%>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-form :model="userInfo" label-width="80px">
        <el-form-item :label-width="userInfo" prop="headimg" height="500px" weight="500px">
            <el-form-item prop="headimg">
                <el-upload
                        class="avatar-uploader"
                <%--请求的路径--%>
                        action="/upload"
                        :show-file-list="false"
                <%--请求成功后的回调函数，参数为上传成功后的返回数据。--%>
                        :on-success="handleAvatarSuccess"
                <%--请求前的回调函数，返回值为false或返回promise时，停止上传。--%>
                        :before-upload="beforeAvatarUpload">
                    <!-- 如果用户信息中的imageUrl字段存在，则显示用户头像 -->
                    <img v-if="userInfo.url" :src="userInfo.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form-item>
        <el-form-item label="编号" :label-width="userInfo" prop="name">
            <el-input v-model="userInfo.staffid" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="userInfo" prop="name">
            <el-input v-model="userInfo.staffname" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所在门店" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.branch.branchname" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.department.deptname" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.role.rolename" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.entrytime" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.idcard" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.phone" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="userInfo" prop="age">
            <el-input v-model.number="userInfo.address" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button>
            <a href="index.jsp" target="main" style="text-decoration-line: none;color: black">
                返回
            </a>
        </el-button>
        <el-button type="primary" @click="updateStaff()">确 定</el-button>
    </div>
</div>
</body>
<script>
    // 创建Vue实例对象
    let app = new Vue({
        el: "#app",
        data: {
            //加载当前人员的信息
            userInfo: {},

        },
        created() {
            this.getStaffInfo();
        },
        //方法
        methods: {

            //修改登陆人信息
            updateStaff() {
            },
            //获取登陆的该用户的信息
            getStaffInfo() {
                axios.get("/staff/getStaffInfoAll11").then(resp => {
                    //console.log(resp);
                    this.userInfo = resp.data.data;
                })
            },
            //上传图片方法
            uploadPictures(params) {
                let formData = new FormData();
                formData.append("file", params.file);
                axios.post("/upload", formData).then(resp => {
                    if (resp.data.code == 200) {
                        //上传成功，将图片地址赋值给staff对象
                        this.userInfo.url = resp.data.data;
                    }
                })
            },
            //上传成功的回调 res: 服务器返回的数据，file:上传的文件对象
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;//把返回的路径赋值给imageUrl
                this.userInfo.url = res.data;
            },
            //上传之前的回调
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 10240 / 10240 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                // 返回true表示上传，返回false表示不上传
                return isJPG && isLt2M;
            },
        }
    })
</script>
</html>
